<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gomoku</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .game-container {
            text-align: center;
        }
        canvas {
            background-color: #f3d2b5;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            cursor: pointer;
        }
        .message {
            font-size: 20px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="game-container">
    <canvas id="gomokuCanvas" width="400" height="400"></canvas>
    <div class="message" id="message"></div>
</div>

<script>
    const canvas = document.getElementById('gomokuCanvas');
    const context = canvas.getContext('2d');
    const gridSize = 15;
    const cellSize = canvas.width / gridSize;
    let board = Array.from({ length: gridSize }, () => Array(gridSize).fill(null));
    let currentPlayer = 'B';
    let gameEnded = false;

    function drawBoard() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        for (let i = 0; i <= gridSize; i++) {
            context.beginPath();
            context.moveTo(i * cellSize, 0);
            context.lineTo(i * cellSize, canvas.height);
            context.stroke();

            context.beginPath();
            context.moveTo(0, i * cellSize);
            context.lineTo(canvas.width, i * cellSize);
            context.stroke();
        }
    }

    function drawStone(x, y, color) {
        context.beginPath();
        context.arc(Math.round((x + 0.5) * cellSize), Math.round((y + 0.5) * cellSize), cellSize / 2 - 5, 0, Math.PI * 2);
        context.fillStyle = color;
        context.fill();
        context.strokeStyle = '#000';
        context.lineWidth = 2;
        context.stroke();
    }

    function placeStone(row, col) {
        if (board[row][col] || gameEnded) return;

        board[row][col] = currentPlayer;
        drawStone(col, row, currentPlayer === 'B' ? 'black' : 'white');

        if (checkWin(row, col)) {
            document.getElementById('message').innerText = `${currentPlayer === 'B' ? 'Black' : 'White'} wins!`;
            gameEnded = true;
        } else {
            currentPlayer = currentPlayer === 'B' ? 'W' : 'B';
        }
    }

    function checkWin(row, col) {
        const directions = [
            { dx: 1, dy: 0 }, // horizontal
            { dx: 0, dy: 1 }, // vertical
            { dx: 1, dy: 1 }, // diagonal /
            { dx: -1, dy: 1 } // diagonal \
        ];

        for (const { dx, dy } of directions) {
            let count = 1;

            for (let i = 1; i < 5; i++) {
                const newRow = row + dx * i;
                const newCol = col + dy * i;
                if (
                    newRow >= 0 && newRow < gridSize &&
                    newCol >= 0 && newCol < gridSize &&
                    board[newRow][newCol] === currentPlayer
                ) {
                    count++;
                } else {
                    break;
                }
            }

            for (let i = 1; i < 5; i++) {
                const newRow = row - dx * i;
                const newCol = col - dy * i;
                if (
                    newRow >= 0 && newRow < gridSize &&
                    newCol >= 0 && newCol < gridSize &&
                    board[newRow][newCol] === currentPlayer
                ) {
                    count++;
                } else {
                    break;
                }
            }

            if (count >= 5) {
                return true;
            }
        }

        return false;
    }

    function handleClick(event) {
        if (gameEnded) return;

        const rect = canvas.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;

        const col = Math.floor(x / cellSize);
        const row = Math.floor(y / cellSize);

        placeStone(row, col);
    }

    canvas.addEventListener('click', handleClick);

    drawBoard();
</script>
</body>
</html>



